import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import { LoadingBlock } from "@some21/element-ui-plus";
// import Home from "../views/Home.vue";
// import { constantCase } from "change-case";
// import { snakeCase } from "change-case";
import { DeAsciiCode } from "@/framework/crypto";
import { getViewComponent } from "./viewsInfo";

Vue.use(VueRouter);
// require("https://cdn.jsdelivr.net/npm/@some21/element-ui-plus@0.0.16/lib/demo/index.js");

const routes: RouteConfig[] = [
  // iframe 页面路由
  {
    path: "/iframe/:url",
    name: "iframe",
    props: { LoadingText: "加载中..." },
    component: LoadingBlock,
  },
  {
    path: "/general/:hash",
    component: {
      async mounted() {
        const { $route, $router } = this as Vue;
        const { params } = $route;
        const { hash } = params;

        const path = DeAsciiCode(hash);
        const url = new URL(path, location.origin);

        const newPath = "/general-" + hash;
        // 所有路由页面都在这里动态加入
        router.addRoute({
          path: newPath,
          component: {
            name: hash,
            components: {
              PageContent: () => getViewComponent(url.pathname),
            },
            render: h => h("PageContent"),
          },
        });
        // 延迟一点点进行跳转可以感觉到刷新动作
        await Vue.nextTick();

        setTimeout(() => {
          $router.replace({ path: newPath + url.search + url.hash }).catch(() => {}); // 将参数直接拼接到新的URL 后面
        }, 50);
      },
      render: h => h(LoadingBlock, { props: { LoadingText: "加载中..." } }),
    },
  },

  // 刷新页面路由
  {
    path: "/redirect/:path*",
    component: {
      async mounted() {
        const { $route, $router } = this as Vue;
        const { params, query } = $route;
        const { path } = params;

        // 延迟一点点进行跳转可以感觉到刷新动作
        setTimeout(() => {
          $router.replace({ path: "/" + path, query }).catch(() => {});
        }, 100);
      },
      render: h => h(LoadingBlock, { props: { LoadingText: "加载中..." } }),
    },
  },

  // {
  //   path: "/",
  //   // TODO 此处可以记录登录用户进来时候应该访问显示的页面
  //   redirect:"/Home/Dashboard",
  // },
];

const router = new VueRouter({
  routes,
});

export default router;
